<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
				<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			window.onload=function(){
				
				document.onmousedown=function(evt){
					var e=evt||event;
					var dix=e.clientX;
					var diy=e.clientY;
					document.onmousemove=function(evt){
						var e=evt||event;
						var x=e.clientX-dix;
						var y=e.clientY-diy;
						$(".box").css({"transform":"rotateX("+x+"deg) rotateY("+y+"deg)"});
					}
					document.onmouseup=function(){
						document.onmousemove=null;
					}					
				}

			}
		</script>
		<style type="text/css">
			body{
				background: black;
			}
			.box{
				width:133px;
				height: 200px;
				position: relative;
				margin: 25% auto;
				transform:rotateX(-30deg)  rotateY(-60deg) ;
				perspective: 1000px;
				border: 1px solid red;
				
				transform-style: preserve-3d;
				
			}
			.box .cat{
				position: absolute;
				left: 0;
				top: 0;
				
				
			}
			.cat img{
				-webkit-box-reflect: below 10px -webkit-linear-gradient(top,rgba(0,0,0,0) 50%,rgba(0,0,0,0.9) 100%);
			}
			.cat1{
				transform: rotateY(50deg) translateZ(-250px);
				
			}
			.cat2{
				transform: rotateY(90deg) translateZ(-250px);
			}
			.cat3{
				transform: rotateY(130deg) translateZ(-250px);
			}
			.cat4{
				transform: rotateY(170deg) translateZ(-250px);
			}
			.cat5{
				transform: rotateY(210deg) translateZ(-250px);
			}
			.cat6{
				transform: rotateY(-290deg) translateZ(250px);
			}
			.cat7{
				transform: rotateY(-250deg) translateZ(250px);
			}
			.cat8{
				transform: rotateY(-210deg) translateZ(250px);
			}
			.cat9{
				transform: rotateY(-170deg) translateZ(250px);
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="cat1 cat">
				<img src="img/img/1.jpg"/>
			</div>
			<div class="cat2 cat">
				<img src="img/img/2.jpg"/>
			</div>
			<div class="cat3 cat">
				<img src="img/img/3.jpg"/>
			</div>
			<div class="cat4 cat">
				<img src="img/img/4.jpg"/>
			</div>
			<div class="cat5 cat">
				<img src="img/img/5.jpg"/>
			</div>
			<div class="cat6 cat">
				<img src="img/img/6.jpg"/>
			</div>
			<div class="cat7 cat">
				<img src="img/img/7.jpg"/>
			</div>
			<div class="cat8 cat">
				<img src="img/img/8.jpg"/>
			</div>
			<div class="cat9 cat">
				<img src="img/img/9.jpg"/>
			</div>
		</div>
	</body>
</html>
